<template>
  <footer v-if="todos.length" class="todo-footer">
    <input type="checkbox" :checked="allDone" @change="toggleAll"/>
    <div>已办事项{{ doneCount }}/全部事项{{ allCount }}</div>
    <button @click="$emit('clearDone')">清除已办</button>
    <button @click="$emit('clearAll')">清除所有</button>
  </footer>
  <h2 v-else>暂无待办事项！</h2>
</template>

<script setup>
import {computed} from 'vue'
const emit=defineEmits(['toggleAll','clearDone','clearAll'])
const props=defineProps({
  todos:{
    type:Array,
    required:true,
    default:()=>[]
  }
})

const allDone=computed(()=>{
  // 只要有一个待办事项，allDone就是false，就不会勾选
  return props.todos.every((item)=>item.done)
})
// 使用计算属性算出已办事项和全部事项的数量
const doneCount=computed(()=>{
  return props.todos.filter(item=>item.done).length
})
const allCount=computed(()=>{
  return props.todos.length
})
const toggleAll=(event)=>{
  // 传递复选框的选中状态（布尔值）
  emit('toggleAll',event.target.checked)
}
</script>

<style scoped>
.todo-footer {
  display: flex;
  margin-top: 20px;
  padding: 10px 40px;
  background-color: #b987eb;
}
.todo-footer div {
  flex: 1;
  margin-left: 20px;
}
.todo-footer button {
  margin-left: 10px;
  padding: 0 10px;
}
h2{
  margin-top: 10px;
  text-align: center;
}
</style>
